<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            margin: 50px auto;
        }
        .con div{
            width: 19px;
            height: 19px;
            background: url(star.png);
            display: inline-block;
            vertical-align:text-top;
            cursor: pointer;
            
           }
           .col{  
            width: 300px;
            margin: 50px auto;

           }
        /* .con div:hover{
            background-position: 0 -28px;
        } */
        .con .bill{
            background-position: 0 -28px;
        }
    </style>
</head>
<body>
    <div class="con">
        <span>评分</span>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <span class="flax"></span>
    </div>
    <div class="col">
        <div class="pl"></div>
    </div>
    <script src="jQuery.js"></script>
    <script>
  var msg = [
    "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
    "不满意|部分有破损，与卖家描述的不符，不满意",
    "一般|质量一般，没有卖家描述的那么好",
    "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
    "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
  ];
     $('.con div').mouseover(function(){
        $(".con div").removeClass("bill");
        $(this).addClass("bill").prevAll().addClass("bill");
        var index=$(this).index();
        var pls = msg[index-1].split('|');
		$(".pl").html('<strong>'+pls[0]+'</strong><p>'+pls[1]+'</p>');
     })
     $('.con div').click(function(){
   
        var index=$(this).index();
        $(".flax").html('<strong>'+index+'分'+'</strong>');
     })


    </script>
</body>
</html>